<template>
    <div class="root">
      <ul class="help_left">
        <li style="font-size: 1.0125rem;font-weight: 300">
          <span>通过我们的FAQ了解更多信息</span>
        </li>
        <li class="mp">
          <el-input v-model="search"
                    :placeholder="recommend"
                    prefix-icon="el-icon-search"
                    maxlength="36"
          ></el-input>
        </li>
        <li class="mp">
          <div class="head_main"><h2>主题</h2></div>
          <ul class="icon">
            <li>
              <router-link to="#">
                <img src="~assets/help/icon1.png" alt="" width="32px">
                <span>公司信息</span>
              </router-link>
            </li>
            <li class="border">
              <router-link to="#">

                <img src="~assets/help/icon2.png" alt="" width="32px">
                <span>配送</span>

              </router-link>
            </li>
            <li>
              <router-link to="#">

                <img src="~assets/help/icon3.png" alt="" width="32px">
                <span>退换货服务</span>

              </router-link>
            </li>
            <li>
              <router-link to="#">
                <img src="~assets/help/icon4.png" alt="" width="32px">
                <span>订单</span>
              </router-link>
            </li>
            <li class="border">
              <router-link to="#">
                <img src="~assets/help/icon5.png" alt="" width="32px">
                <span>产品</span>
              </router-link>
            </li>
            <li>
              <router-link to="#">
                <img src="~assets/help/icon6.png" alt="" width="32px">
                <span>顾客服务</span>
              </router-link>
            </li>
          </ul>
        </li>
        <li class="call mp">
          <ul>
            <li><h2>联系我们</h2></li>
            <li class="msg"><span>通过您最喜欢的联系方式联系我们的顾客服务</span></li>
            <li class="btn_call"><router-link to="/index/help/call">联系我们</router-link></li>
          </ul>
        </li>
      </ul>
      <ul class="help_right">
        <li>
          <h2 style="padding: 32px;box-shadow: inset 0 -1px 0 0 #eae8e4">常见问题</h2>
        </li>
        <li class="lists">
          <ul>
            <li><router-link to="#">如何进行退换货？</router-link> </li>
            <li><router-link to="#">如何在线购买路易威登的产品？</router-link> </li>
            <li><router-link to="#">如何查找专卖店？</router-link> </li>
            <li><router-link to="#">如何维修路易威登产品？</router-link> </li>
            <li><router-link to="#">邮递配送</router-link> </li>
            <li><router-link to="#">如何开发票？</router-link> </li>
          </ul>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "Question",
      data(){
          return{
            //搜索内容
            search: '',
            // 搜索提示
            recommend: '我们如何为您提供帮助?',
          }
      }
    }
</script>

<style scoped>
  .help_left .mp{
    margin-top: 40px;
  }
  .help_left li {
    width: 640px;
    margin-right: 24px;
  }

  .help_left li:nth-of-type(n+2) {
    background-color: white;

  }

  .el-input >>> .el-input__inner {
    font-size: 1rem;
    line-height: 2.75rem;
    height: 2.75rem;
    outline: none;
    padding: 0 1rem 0 2.75rem;
    font-weight: 300;
    color: #19110b;
    flex: 1 1 auto;
  }

  .head_main {
    height: 93px;
    padding: 32px;
  }

  .icon {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .icon li {
    padding: 32px 66px;
    width: 213px;
    height: 120px;
    margin: 0;
    font-size: .7875rem;
    font-weight: 500;
    border-top: 1px solid #eae8e4;
  }

  .icon img, .icon span {
    display: block;
    text-align: center;
    margin: 0 auto;
  }

  .icon span {
    margin-top: 5px;
    padding: 1px;
  }
  .icon .border{
    border-left: 1px solid #eae8e4;
    border-right: 1px solid #eae8e4;
  }

  .icon span:hover {
    text-decoration-line: underline;
  }
  .call{
    padding: 2rem;
    box-sizing: border-box;
  }
  .call li{
    width: 100%;
  }
  .call .msg{
    font-size: 1.0125rem;
    font-weight:300;
    margin-top: 20px;
  }
  .call .btn_call{
    font-size: .9rem;
    padding: 1rem 1.5rem;
    border: 0.0625rem solid #eae8e4;
    background-color: #fff;
    outline: 0;
    cursor: pointer;
    width: 100%;
    margin-top: 30px;
    text-align: center;
  }

  .help_right{
    top: 200px;
    background-color: white;
    width: 479px;
    position: absolute;
    right: 60px;
  }
  .lists{
    padding: 0.5rem 2rem 2rem;
    font-weight: 400;
  }
  .lists ul li{
    text-decoration-line: underline;
    font-size: .9rem;
    font-weight: 400;
    padding-top: 30px;
  }
</style>
